<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>用户列表</span>
            </div>
        </template>
        <el-table :data="datas">
            <el-table-column label="#" prop="id" />
            <el-table-column label="用户名" prop="username" />
            <el-table-column label="昵称" prop="nickname" />
            <el-table-column label="性别" prop="sex" />
            <el-table-column label="手机" prop="tel" />
            <el-table-column label="状态" prop="usable">
                <template #default="scope">
                    <el-tag :type="color(scope.$index)">{{text(scope.row.usable)}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column width="200" label="操作">
                <template #default="scope">
                    <el-button @click="open(scope.row.id,scope.$index,1)" :type="color(scope.$index)" plain>
                        <el-icon>
                            <SwitchButton />
                        </el-icon>
                        {{text(scope.$index)}}
                    </el-button>
                    <el-button @click="open(scope.row.id,scope.$index,0)" type="danger" plain>
                        <el-icon>
                            <Delete />
                        </el-icon> 删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import user from '@/api/user'
let datas = ref([]);
let success = reactive('success');
let danger = reactive('danger');
onMounted(async () => {
    let { status, msg, data } = await user.list();
    if (status) {
        datas.value = data;
    }
})

let color = (index) => {
    // console.log('color',index);
    if (datas.value[index].usable === 1) return 'success';
    return 'danger';
}

let text = (index) => {
    if (datas.value[index].usable === 1) return '关闭';
    return '开启';
}

let open = (id, index, j) => {
    ElMessageBox.confirm(
        `是否${text(index)}用户?`,
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: '警告',
        }
    )
        .then(async () => {
            ElMessage({type: 'success',message: '修改成功',});
            if (j === 1) {
                datas.value[index].usable = datas.value[index].usable ^ 1;
                let { status, msg } = await user.open({ id: id, usable: datas.value[index].usable });
            } else {
                let { status, msg } = await user.remove({ id: id});
            }
        })
        .catch(() => {
            ElMessage({type: 'info',message: '取消关闭',})
        })
}
</script>

<style lang="less">
.el-table {
    font-size: 12px;
}
</style>

 